<template>
	<view
		class="titles"
		:style="{
			marginTop: styles.marginTop + 'px',
			marginBottom: styles.marginBottom + 'px',
			marginLeft: styles.marginLeft + 'px',
			marginRight: styles.marginRight + 'px'
		}"
	>
		<view :style="{ background: styles.colorBg, borderRadius: styles.circle + 'px' }">
			<view :class="styles.wordStatus=='center'?'navTwo':'nav'">
				<image :src="styles.upLoad1.img" mode=""></image>
				<view :style="{ color: styles.upLoad1.colorWord,fontSize:'28upx' }">{{ styles.upLoad1.text }}</view>
			</view>
			<view class="nav1">
				<view :style="{ color: styles.upLoad1.colorWord,fontSize:'20upx' }">{{ styles.upLoad2.text }}</view>
				<image :src="styles.upLoad2.img" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'titles',
	data() {
		return {};
	},
	methods: {},
	props: ['styles']
};
</script>
<style lang="scss" scoped>
.titles {
	& > view:nth-child(1) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx;
		.nav {
			// width: 130upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image {
				width: 50upx;
				height: 50upx;
			}
			& > view {
				font-weight: bold;
				color: rgb(33, 33, 33);
				margin-left: 20upx!important;
			}
		}
		.navTwo {
			// width: 130upx;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			image {
				width: 50upx;
				height: 50upx;
				
			}
			& > view {
				font-weight: bold;
				color: rgb(33, 33, 33);
				
			}
		}
		.nav1 {
			// width: 130upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image {
				width: 50upx;
				height: 50upx;
			}
			& > view {
				color: rgb(33, 33, 33);
				margin-right: 20upx;
			}
		}
	}
}
</style>
